<template>
  <div>
    <CommentBody
      :comment="comment"
      @send="send"
      @load-replies="loadReplies"
      @hide-replies="hideReplies"
    ></CommentBody>

    <div class="ml-5">
      <CommentBody
        v-for="reply in replies"
        :comment="reply"
        :key="reply.Id"
        @send="send"
      ></CommentBody>
    </div>
  </div>
</template>

<script>
import CommentBody from "./CommentBody";
import axios from "axios";

export default {
  name: "Comment",
  components: {
    CommentBody,
  },
  props: {
    comment: {
      required: true,
      type: Object,
    },
  },
  data: () => ({
    replies: [],
    reply: {
      Content: "",
      CommentId: "",
    },
  }),
  methods: {
    send(content) {
      this.reply.Content = content;
      this.reply.CommentId = this.comment.id;
      axios
        .post("api/comment/" + this.comment.id + "/replies", this.reply)
        .then((res) => {
          window.console.log(this.replies);
          this.replies.push(res.data);
        })
        .catch((err) => window.console.log(err));
    },
    loadReplies() {
      axios
        .get("/api/comment/" + this.comment.id + "/replies")
        .then((res) => {
          this.replies = res.data;
        })
        .catch((err) => window.console.log(err));
    },
    hideReplies() {
      this.replies = null;
    },
  },
};
</script>

<style>
</style>